// 该文件主要用于：创建并暴露一个真正的路由器
import Vue from 'vue'
// 引入VueRouter
import VueRouter from 'vue-router'
// 引入About、Home组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Message from '../pages/Message.vue'
import Detail from '../pages/Detail.vue'

// 安装VueRouter插件
Vue.use(VueRouter)

// 创建并暴露一个路由器
export default new VueRouter({
	mode:'history',
	routes:[
		{
			name:'guanyu',
			path:'/about',
			component:About,
		},
		{
			name:'jia',
			path:'/home',
			component:Home,
			children:[
				{
					name:'xinwen',
					path:'news',
					component:News
				},
				{
					name:'xiaoxi',
					path:'message',
					component:Message,
					children:[
						{
							name:'xiangqing',
							path:'detail',
							component:Detail,
							// 路由配置项中的props，第一种写法：对象，功能是：将对象中的每一组key-value以props的形式传递给路由组件
							// props:{a:1,b:2}

							// 路由配置项中的props，第二种写法：布尔值，功能是：将$route.params中的每一组key-value以props的形式传递给路由组件
							// props:true
							
							// 路由配置项中的props，第二种写法：函数，功能是：
							// props函数何时调用？ —— 命中该路由规则时
							// props函数中的this是谁？—— 不是vc，也不是vm 对我们没用
							// props函数接收什么参数？—— 就是组件实例上的$route属性
							props(route){
								console.log('@',route)
								return {...route.query,a:1}
							}

						}
					]
				}
			]
		},
	]
})
